<template class="task-template">
  <section id="abp-cli-add-section" class="section js-section u-category-abp-cli">
    <header class="section-header">
      <div class="section-wrapper">
        <h1>
          <svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-windows"></use></svg>
          Abp CLI: <code>add-package</code> & <code>add-module</code>
        </h1>
        <h3>Add an ABP package to an existing project, or adds and ABP module to existing solution.</h3>
        <p>See the <a href="https://docs.abp.io/en/abp/latest/CLI#add-package">ABP framework documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> in your browser for more informations.</p>
      </div>
    </header>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="new-window-demo-toggle" class="js-container-target demo-toggle-button">Add a package
          <div class="demo-meta u-avoid-clicks">Add an ABP package to an existing project</div>
        </button>
        <div id="box-abp-cli-add-package" class="demo-box">
          <h5 style="margin-top: 0;">Command</h5>
          <pre><code>abp add-package &lt;package-name&gt; [options]</code></pre>

          <div id="add-package-info">
            <h5>Package Name</h5>
            <input id="add-package-name" class="demo-input" type="text" />
            <h5>Project</h5>
            <input id="add-package-project-file" class="demo-input" type="text" />
            <button id="add-package-select-file-btn" class="demo-button">Select</button>
          </div>

          <h5>
            <button class="demo-button" id="add-package-execute">Execute</button>
          </h5>

          <div id="add-package-process" class="hidden">
            <h5>Command Line Process</h5>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="new-window-demo-toggle" class="js-container-target demo-toggle-button">Add a module
          <div class="demo-meta u-avoid-clicks">Add an ABP module to an existing solution</div>
        </button>
        <div id="box-abp-cli-add-module" class="demo-box">
          <h5 style="margin-top: 0;">Command</h5>
          <pre><code>abp add-module &lt;module-name&gt; [options]</code></pre>

          <div id="add-module-info">
            <h5>Module Name</h5>
            <input id="add-module-name" class="demo-input" type="text" />
            <h5>Solution</h5>
            <input id="add-module-solution-file" class="demo-input" type="text" />
            <button id="add-module-select-file-btn" class="demo-button">Select</button>
          </div>

          <div id="add-module-options">
            <h5>Extra Options</h5>
            <div>
              <div>
                <input id="add-module-skip-db-migrations" type="checkbox" />
                <label>Skip DB Migrations</label>
              </div>
              <p id="add-module-skip-db-migrations-desc">For EF Core database provider, it automatically adds a new code first migration (Add-Migration) and updates the database (Update-Database) if necessary. Specify this option to skip this operation.</p>
              <div>
                <input id="add-module-specified-startup-project" type="checkbox" />
                <label>Specified Startup Project</label>
              </div>
              <div id="add-module-startup-project" class="hidden">
                <input id="add-module-startup-project-file" class="demo-input" type="text" />
                <button id="add-module-select-startup-project-file-btn" class="demo-button">Select</button>
              </div class="hidden">
              <p id="add-module-specified-startup-project-desc">Relative path to the project folder of the startup project. Default value is the current folder.</p>
            </div>
          </div>

          <h5>
            <button class="demo-button" id="add-module-execute">Execute</button>
          </h5>

          <div id="add-module-process" class="hidden">
            <h5>Command Line Process</h5>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      require('./renderer-process/abp-cli/abp-cli-add-package.js')
      require('./renderer-process/abp-cli/abp-cli-add-module.js')
    </script>

  </section>
</template>
